<template>
           
    <div class="crumbs">
                   
        <el-breadcrumb separator="/">
                            <h3 style="color #DDDDDD">当前位置:基础信息功能/课程设置</h3>
                       
        </el-breadcrumb>
               
    </div>
    <el-button  class="filter-item"
        size="mini"
        type="primary"
       @click="open">添加</el-button>
    <el-button
        class="filter-item"
        size="mini"
        type="primary"
        icon="el-icon-upload"
        @click="dialogVisible = true"
      >批量导入</el-button>
    <el-dialog :title="titles" v-model="dialogFormVisible">
        <el-form :model="form" :rules="addFormRules" ref="addFormRef">
            <el-form-item label="课程编号" label-width="100px">
                <el-input v-model="form.curriculumid"/>
            </el-form-item>
        </el-form>
        <el-form :model="form">
            <el-form-item label="课程名称" label-width="100px">
                <el-input v-model="form.curriculumname"/>
            </el-form-item>
        </el-form>
        
        <el-form :model="form">
            <el-form-item label="是否开卷" label-width="100px">
                <el-input v-model="form.isopen"/>
            </el-form-item>
        </el-form>

        <el-form :model="form">
            <el-form-item label="任课教师" label-width="100px">
                <el-input v-model="form.curriculumteacher"/>
            </el-form-item>
        </el-form>
        <el-form :model="form">
            <el-form-item label="开课年级" label-width="100px">
                <el-input v-model="form.grade"/>
            </el-form-item>
        </el-form>
        <div class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitCheck">确 定</el-button>
        </div>
    </el-dialog>


    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="curriculumid"
                label="课程编号"
                width="250">
        </el-table-column>
        <el-table-column
                prop="curriculumname"
                label="课程名称"
                width="250">
        </el-table-column>
        <el-table-column
                prop="isopen"
                label="是否开卷"
                width="250"
        >
        </el-table-column>
         <el-table-column
                prop="curriculumteacher"
                label="任课教师"
                width="250"
        >
        </el-table-column>
      
        <el-table-column
                prop="grade"
                label="开课年级"
                width="250"
        >
        </el-table-column>
        

        <el-table-column
                prop="operation"
                label="操作"
                width="250">
            <template #default="scope">

                <el-button type="primary" @click="updateId(scope.row)">编辑</el-button>
                <el-button type="danger" @click="deleteID(scope.row)">删除</el-button>
            </template>

        </el-table-column>
    </el-table>
    <!--    <el-pagination-->
    <!--    background-->
    <!--  layout="prev, pager, next"-->
    <!--  :page-size="currentPage.page"-->
    <!--  :total="currentPage.total"-->
    <!--  :page-count="currentPage.count"-->
    <!--  :current-page="currentPage.current"-->
    <!--  @current-change="getpage">-->
    <!--  -->
    <!--</el-pagination>-->
    <el-pagination

            @current-change="getpage"
            current-page.sync="5"
            :page-size="currentPage.limit"
            layout="total, prev, pager, next"
            :total="currentPage.current">
    </el-pagination>

     <el-dialog title="批量导入" v-model="dialogVisible" >
            <el-form-item >
            选择Excel:
                 <upload-excel-component  :on-success="handleSuccess" :before-upload="beforeUpload" />
            </el-form-item>
        </el-dialog>

</template>
<script>
    import {addgouji, fetchDataI,deletegoujiID} from '../api/index.js'
 import UploadExcelComponent from '../components/UploadExcel/index.vue'
    export default {
           components: { UploadExcelComponent },
        created() {
            this.getdata(this.currentPage);
        },
        methods: {
             //上传之前  你可以获得文件做一些个性化设置
    beforeUpload(file) {
        let clasName=file.name.split('.')
        if(clasName[clasName.length-1]=='xlsx'||clasName[clasName.length-1]=='xls'){
            return true
        }
    
      this.$message({
        message: '请上传xlsx格式文件',
        type: 'warning'
      })
      return false
    },   
    //成功之后返回表体表头
     handleSuccess({ results, header }) {
	 var a=[];
	 var w = {};
	 for(var i=0;i<results.length;i++){
	 		 var x = JSON.parse(JSON.stringify(results[i]).replace(/课程编号/g,"curriculumid"));
	 		 var y = JSON.parse(JSON.stringify(x).replace(/开课年级/g,"grade"));
	 		 var z = JSON.parse(JSON.stringify(y).replace(/任课教师/g,"curriculumteacher"));
	 		 var k = JSON.parse(JSON.stringify(z).replace(/是否开卷/g,"isopen"));
	 		 w = JSON.parse(JSON.stringify(k).replace(/课程名称/g,"curriculumname"));
	 		 
	 		 addgouji(w).then(Object => {
	 		     this.getdata(this.currentPage);
	 		     this.dialogFormVisible = false;
	 		 })
	 		 
	 }
	 this.dialogVisible = false;
	 this.$message({
	   message: '导入成功!',
	   type: 'success'
	 });
    },

            open() {
                console.log(this.dialogFormVisible)
                this.dialogFormVisible = true;
                this.form.pkId=0;
                this.titles='添加'
            },
            add() {
            }, 
			deleteID(row) {
				this.$confirm('确认删除?', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
					deletegoujiID(row).then(Object => {
					
					    this.getdata(this.currentPage);
					
					})
				  this.$message({
					type: 'success',
					message: '删除成功!'
				  });
				}).catch(() => {
				  this.$message({
					type: 'info',
					message: '已取消删除'
				  });          
				});
                
            },
            updateId(row) {
                this.form = row;
                this.dialogFormVisible = true;
                this.titles = '编辑';

            },
            getpage(val) {
                console.log(val)
                this.currentPage.page = val;
                this.getdata(this.currentPage);
            },
            getdata(val) {

                fetchDataI(val).then(Object => {
                    this.tableData = Object.records[0];
                    console.log(Object);

                    this.currentPage.current = Object.rowCount;

                    console.log(this.currentPage.page);
                })
            },
            handleClick(row) {
                console.log(row);
            },
            page(currentPage) {
                this.currentPage.current = currentPage;
                this.getdata(this.currentPage);
            },

            submitCheck() {
                this.$refs.addFormRef.validate(valid => {
                    addgouji(this.form).then(Object => {
                        this.getdata(this.currentPage);
                        this.dialogFormVisible = false;

                    })
                })

            },


        },
        data() {
            return {
                dialogVisible:false,
                dialogFormVisible: false,
                total: null,
                tableData: null,
                currentPage: {
                    page: 1,
                    total: 20,
                    count: 50,
                    current: 10,
                    limit: 10
                },
                titles:'添加',
                form: {
                    pkId:0,
                    curriculumid: '',
                    curriculumname: '',
                    isopen: '',
                    curriculumteacher: '',
                    grade:''
                }
            }
        }
    }
</script>
